2025년 9월 26일한국어

React Portal을 사용한 이벤트 버블링 제어에 대한 심층 분석입니다. 이벤트를 선택적으로 전파하고 예측 가능한 UI를 구축하는 방법을 알아보세요.

React Portal 이벤트 버블링 제어: 선택적 이벤트 전파

React Portal은 표준 React 컴포넌트 계층 구조 외부에서 컴포넌트를 렌더링하는 강력한 방법을 제공합니다. 이는 모달, 툴팁, 오버레이와 같이 논리적 부모와 독립적으로 요소를 시각적으로 배치해야 하는 시나리오에 매우 유용할 수 있습니다. 그러나 DOM 트리로부터의 이러한 분리는 이벤트 버블링에 복잡성을 야기할 수 있으며, 주의 깊게 관리하지 않으면 예기치 않은 동작으로 이어질 수 있습니다. 이 기사에서는 React Portal을 사용한 이벤트 버블링의 복잡성을 살펴보고 원하는 컴포넌트 상호 작용을 달성하기 위해 이벤트를 선택적으로 전파하는 전략을 제공합니다.

DOM에서 이벤트 버블링 이해

React Portal에 들어가기 전에 DOM(Document Object Model)에서 이벤트 버블링의 기본 개념을 이해하는 것이 중요합니다. HTML 요소에서 이벤트가 발생하면 먼저 해당 요소(대상)에 연결된 이벤트 핸들러를 트리거합니다. 그런 다음 이벤트는 DOM 트리를 따라 "버블"되어 문서의 루트(window)까지 각 부모 요소에서 동일한 이벤트 핸들러를 트리거합니다. 이 동작을 통해 각 자식 요소에 개별 리스너를 연결하는 대신 단일 이벤트 리스너를 부모 요소에 연결할 수 있으므로 이벤트를 보다 효율적으로 처리할 수 있습니다.

예를 들어 다음 HTML 구조를 고려하십시오.


<div id="parent">
  <button id="child">Click Me</button>
</div>

#child 버튼과 #parent div 모두에 click 이벤트 리스너를 연결하면 버튼을 클릭하면 먼저 버튼에서 이벤트 핸들러가 트리거됩니다. 그런 다음 이벤트는 부모 div로 버블링되어 해당 click 이벤트 핸들러도 트리거합니다.

React Portal 및 이벤트 버블링의 문제점

React Portal은 자식을 DOM의 다른 위치에 렌더링하여 효과적으로 React 컴포넌트 계층 구조의 연결을 컴포넌트 트리의 원래 부모와 분리합니다. React 컴포넌트 트리는 그대로 유지되지만 DOM 구조는 변경됩니다. 이러한 변경은 이벤트 버블링에 문제를 일으킬 수 있습니다. 기본적으로 포털 내에서 발생하는 이벤트는 여전히 DOM 트리를 따라 버블링되어 React 애플리케이션 외부의 요소 또는 해당 요소가 포털의 콘텐츠가 렌더링되는 *DOM 트리*의 상위 요소인 경우 애플리케이션 내의 예기치 않은 부모 요소에서 이벤트 리스너를 트리거할 수 있습니다. 이 버블링은 React 컴포넌트 트리가 *아닌* DOM에서 발생합니다.

React Portal을 사용하여 렌더링된 모달 컴포넌트가 있는 시나리오를 생각해 보십시오. 모달에는 버튼이 포함되어 있습니다. 버튼을 클릭하면 이벤트가 body 요소(포털을 통해 모달이 렌더링되는 위치)로 버블링된 다음 DOM 구조를 기반으로 모달 외부의 다른 요소로 버블링될 수 있습니다. 이러한 다른 요소에 클릭 핸들러가 있는 경우 예기치 않게 트리거되어 의도하지 않은 부작용이 발생할 수 있습니다.

React Portal로 이벤트 전파 제어

React Portal로 인해 발생하는 이벤트 버블링 문제를 해결하려면 이벤트 전파를 선택적으로 제어해야 합니다. 취할 수 있는 몇 가지 접근 방식이 있습니다.

1. `stopPropagation()` 사용

가장 간단한 접근 방식은 이벤트 객체에서 stopPropagation() 메서드를 사용하는 것입니다. 이 메서드는 이벤트가 DOM 트리에서 더 이상 버블링되지 않도록 합니다. 포털 내의 요소의 이벤트 핸들러 내에서 stopPropagation()을 호출할 수 있습니다.

예제:


import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root'); // HTML에 modal-root 요소가 있는지 확인합니다.

function Modal(props) {
  return ReactDOM.createPortal(
    <div className="modal" onClick={(e) => e.stopPropagation()}>
      <div className="modal-content">
        {props.children}
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      {showModal && (
        <Modal>
          <button onClick={() => alert('Button inside modal clicked!')}>Click Me Inside Modal</button>
        </Modal>
      )}

      <div onClick={() => alert('Click outside modal!')}>
        Click here outside the modal
      </div>
    </div>
  );
}

export default App;

이 예제에서 .modal div에 연결된 onClick 핸들러는 e.stopPropagation()을 호출합니다. 이렇게 하면 모달 내의 클릭이 모달 외부의 <div>에서 onClick 핸들러를 트리거하지 못합니다.

고려 사항:

stopPropagation()은 이벤트가 React 애플리케이션과 관련이 있는지 여부에 관계없이 DOM 트리에서 더 높은 위치에 있는 이벤트 리스너가 더 이상 트리거되지 않도록 합니다.
이 메서드는 이벤트 버블링 동작에 의존할 수 있는 다른 이벤트 리스너를 방해할 수 있으므로 신중하게 사용하십시오.

2. 대상에 따른 조건부 이벤트 처리

또 다른 접근 방식은 이벤트 대상을 기반으로 이벤트를 조건부로 처리하는 것입니다. 이벤트 대상이 이벤트 핸들러 로직을 실행하기 전에 포털 내에 있는지 확인할 수 있습니다. 이렇게 하면 포털 외부에서 발생하는 이벤트를 선택적으로 무시할 수 있습니다.

예제:


import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal(props) {
  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-content">
        {props.children}
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = React.useState(false);

  const handleClickOutsideModal = (event) => {
    if (showModal && !modalRoot.contains(event.target)) {
      alert('Clicked outside the modal!');
      setShowModal(false);
    }
  };

  React.useEffect(() => {
    document.addEventListener('mousedown', handleClickOutsideModal);
    return () => {
      document.removeEventListener('mousedown', handleClickOutsideModal);
    };
  }, [showModal]);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      {showModal && (
        <Modal>
          <button onClick={() => alert('Button inside modal clicked!')}>Click Me Inside Modal</button>
        </Modal>
      )}
    </div>
  );
}

export default App;

이 예제에서 handleClickOutsideModal 함수는 이벤트 대상(event.target)이 modalRoot 요소 내에 포함되어 있는지 확인합니다. 그렇지 않은 경우 클릭이 모달 외부에서 발생했음을 의미하며 모달이 닫힙니다. 이 접근 방식은 모달 내부의 실수로 인한 클릭이 "외부 클릭" 로직을 트리거하지 않도록 합니다.

고려 사항:

이 접근 방식에서는 포털이 렌더링되는 루트 요소(예: modalRoot)에 대한 참조가 있어야 합니다.
포털 내의 중첩된 요소의 경우 이벤트 대상을 수동으로 확인하는 것이 더 복잡할 수 있습니다.
사용자가 모달 또는 유사한 컴포넌트 외부를 클릭할 때 특정 작업을 트리거하려는 시나리오를 처리하는 데 유용할 수 있습니다.

3. 캡처 단계 이벤트 리스너 사용

이벤트 버블링은 기본 동작이지만 이벤트는 버블링 단계 전에 "캡처" 단계를 거칩니다. 캡처 단계 동안 이벤트는 창에서 대상 요소로 DOM 트리를 따라 이동합니다. 이벤트 리스너를 추가할 때 useCapture 옵션을 true로 설정하여 캡처 단계에서 이벤트를 수신하는 이벤트 리스너를 연결할 수 있습니다.

캡처 단계 이벤트 리스너를 문서(또는 다른 적절한 상위 요소)에 연결하면 이벤트가 포털에 도달하기 전에 이벤트를 가로채서 버블링되는 것을 방지할 수 있습니다. 이는 이벤트가 다른 요소에 도달하기 전에 이벤트를 기반으로 일부 작업을 수행해야 하는 경우에 유용할 수 있습니다.

예제:


import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal(props) {
  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-content">
        {props.children}
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = React.useState(false);

  const handleCapture = (event) => {
    // 이벤트가 modal-root 내부에서 발생한 경우 아무 작업도 수행하지 않습니다.
    if (modalRoot.contains(event.target)) {
      return;
    }

    // 이벤트가 모달 외부에서 발생한 경우 이벤트가 버블링되지 않도록 합니다.
    console.log('Event captured outside the modal!', event.target);
    event.stopPropagation();
    setShowModal(false);
  };

  React.useEffect(() => {
    document.addEventListener('click', handleCapture, true); // 캡처 단계!
    return () => {
      document.removeEventListener('click', handleCapture, true);
    };
  }, [showModal]);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      {showModal && (
        <Modal>
          <button onClick={() => alert('Button inside modal clicked!')}>Click Me Inside Modal</button>
        </Modal>
      )}
    </div>
  );
}

export default App;

이 예제에서 handleCapture 함수는 useCapture: true 옵션을 사용하여 문서에 연결됩니다. 즉, handleCapture는 페이지의 다른 클릭 핸들러 *전에* 호출됩니다. 함수는 이벤트 대상이 modalRoot 내에 있는지 확인합니다. 그렇다면 이벤트는 계속 버블링될 수 있습니다. 그렇지 않은 경우 event.stopPropagation()을 사용하여 이벤트가 버블링되지 않도록 하고 모달이 닫힙니다. 이렇게 하면 모달 외부의 클릭이 위로 전파되는 것을 방지할 수 있습니다.

고려 사항:

캡처 단계 이벤트 리스너는 버블링 단계 리스너 *전에* 실행되므로 주의해서 사용하지 않으면 페이지의 다른 이벤트 리스너를 방해할 수 있습니다.
이 접근 방식은 stopPropagation() 또는 조건부 이벤트 처리보다 이해하고 디버그하기가 더 복잡할 수 있습니다.
이벤트 흐름 초기에 이벤트를 가로채야 하는 특정 시나리오에서 유용할 수 있습니다.

4. React의 합성 이벤트 및 Portal의 DOM 위치

React의 합성 이벤트 시스템을 기억하는 것이 중요합니다. React는 네이티브 DOM 이벤트를 크로스 브라우저 래퍼인 합성 이벤트로 래핑합니다. 이 추상화는 React에서 이벤트 처리를 단순화하지만 기본 DOM 이벤트는 여전히 발생하고 있음을 의미합니다. React 이벤트 핸들러는 루트 요소에 연결된 다음 적절한 컴포넌트에 위임됩니다. 그러나 Portal은 DOM 렌더링 위치를 변경하지만 React 컴포넌트 구조는 동일하게 유지됩니다.

따라서 포털의 콘텐츠가 DOM의 다른 부분에 렌더링되더라도 React의 이벤트 시스템은 여전히 컴포넌트 트리를 기반으로 작동합니다. 즉, React에서 관리하는 DOM 영역 *외부*에서 버블링을 특별히 방지할 필요가 없는 한 DOM 이벤트 흐름을 직접 조작하지 않고도 포털 내에서 React의 이벤트 처리 메커니즘(예: onClick)을 계속 사용할 수 있습니다.

React Portal을 사용한 이벤트 버블링에 대한 모범 사례

React Portal 및 이벤트 버블링을 사용할 때 명심해야 할 몇 가지 모범 사례는 다음과 같습니다.

DOM 구조 이해: 포털이 렌더링되는 DOM 구조를 주의 깊게 분석하여 이벤트가 트리를 따라 버블링되는 방식을 이해합니다.
stopPropagation()을 드물게 사용: stopPropagation()은 의도하지 않은 부작용이 발생할 수 있으므로 절대적으로 필요한 경우에만 사용하십시오.
조건부 이벤트 처리 고려: 이벤트 대상을 기반으로 조건부 이벤트 처리를 사용하여 포털 내에서 발생하는 이벤트를 선택적으로 처리합니다.
캡처 단계 이벤트 리스너 활용: 특정 시나리오에서는 캡처 단계 이벤트 리스너를 사용하여 이벤트 흐름 초기에 이벤트를 가로채는 것을 고려하십시오.
철저히 테스트: 컴포넌트를 철저히 테스트하여 이벤트 버블링이 예상대로 작동하고 의도하지 않은 부작용이 없는지 확인합니다.
코드 문서화: React Portal을 사용하여 이벤트 버블링을 처리하는 방법을 설명하기 위해 코드를 명확하게 문서화하십시오. 이렇게 하면 다른 개발자가 코드를 이해하고 유지 관리하기가 더 쉬워집니다.
접근성 고려: 이벤트 전파를 관리할 때 변경 사항이 애플리케이션의 접근성에 부정적인 영향을 미치지 않도록 하십시오. 예를 들어 키보드 이벤트가 실수로 차단되는 것을 방지합니다.
성능: 특히 document 또는 window 객체에 과도한 이벤트 리스너를 추가하지 마십시오. 성능에 영향을 줄 수 있습니다. 적절한 경우 이벤트 핸들러를 디바운스하거나 스로틀링하십시오.

실제 예제

React Portal을 사용하여 이벤트 버블링을 제어하는 것이 필수적인 몇 가지 실제 예제를 살펴보겠습니다.

모달: 위의 예제에서 입증된 바와 같이 모달은 React Portal의 고전적인 사용 사례입니다. 모달 내의 클릭이 모달 외부에서 작업을 트리거하는 것을 방지하는 것은 좋은 사용자 경험에 매우 중요합니다.
툴팁: 툴팁은 종종 포털을 사용하여 대상 요소와 상대적으로 배치됩니다. 툴팁을 클릭하면 부모 요소가 닫히지 않도록 방지할 수 있습니다.
컨텍스트 메뉴: 컨텍스트 메뉴는 일반적으로 포털을 사용하여 마우스 커서 근처에 배치됩니다. 컨텍스트 메뉴를 클릭하면 기본 페이지에서 작업이 트리거되지 않도록 방지할 수 있습니다.
드롭다운 메뉴: 컨텍스트 메뉴와 유사하게 드롭다운 메뉴는 종종 포털을 사용합니다. 이벤트 전파를 제어하는 것은 메뉴 내부의 실수로 인한 클릭으로 인해 메뉴가 조기에 닫히는 것을 방지하는 데 필요합니다.
알림: 알림은 포털을 사용하여 화면의 특정 영역(예: 오른쪽 상단)에 배치할 수 있습니다. 알림을 클릭하면 기본 페이지에서 작업이 트리거되지 않도록 방지하면 유용성을 향상시킬 수 있습니다.

결론

React Portal은 표준 React 컴포넌트 계층 구조 외부에서 컴포넌트를 렌더링하는 강력한 방법을 제공하지만 이벤트 버블링에 복잡성을 야기합니다. DOM 이벤트 모델을 이해하고 stopPropagation(), 조건부 이벤트 처리 및 캡처 단계 이벤트 리스너와 같은 기술을 사용하면 이벤트 전파를 효과적으로 제어하고 보다 예측 가능하고 유지 관리 가능한 사용자 인터페이스를 구축할 수 있습니다. React Portal 및 이벤트 버블링을 사용할 때는 DOM 구조, 접근성 및 성능을 신중하게 고려하는 것이 중요합니다. 컴포넌트를 철저히 테스트하고 코드를 문서화하여 이벤트 처리가 예상대로 작동하는지 확인하십시오.

React Portal을 사용하여 이벤트 버블링 제어를 마스터하면 애플리케이션과 원활하게 통합되어 전반적인 사용자 경험을 향상시키고 코드 베이스를 더욱 강력하게 만드는 정교하고 사용자 친화적인 컴포넌트를 만들 수 있습니다. 개발 방식이 발전함에 따라 이벤트 처리의 뉘앙스를 따라가는 것은 애플리케이션이 전 세계적으로 반응성이 뛰어나고 접근 가능하며 유지 관리 가능하도록 보장합니다.

React Portal 이벤트 버블링 제어: 선택적 이벤트 전파

DOM에서 이벤트 버블링 이해

React Portal 및 이벤트 버블링의 문제점

React Portal로 이벤트 전파 제어

1. stopPropagation() 사용

2. 대상에 따른 조건부 이벤트 처리

3. 캡처 단계 이벤트 리스너 사용

4. React의 합성 이벤트 및 Portal의 DOM 위치

React Portal을 사용한 이벤트 버블링에 대한 모범 사례

실제 예제

결론

1. `stopPropagation()` 사용